<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏平台</title>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            color: white;
        }

        /* 导航栏 */
        .navbar {
            background: rgba(0, 0, 0, 0.7);
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar .logo {
            font-size: 24px;
            font-weight: bold;
            color: white;
            text-decoration: none;
        }

        .navbar .user-actions a {
            color: white;
            text-decoration: none;
            margin-left: 15px;
            font-size: 16px;
        }

        .navbar .user-actions a:hover {
            text-decoration: underline;
        }

        /* 页面内容 */
        .container {
            padding: 20px;
        }

        /* 游戏卡片 */
        .game-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 40px;
        }

        .game-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
            width: calc(33.333% - 20px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .game-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .game-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .game-card .info {
            padding: 15px;
        }

        .game-card .name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .game-card .description {
            font-size: 14px;
            color: #ccc;
        }

        /* 排行榜 */
        .leaderboard {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
        }

        .leaderboard h2 {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .leaderboard ol {
            list-style: none;
            padding: 0;
        }

        .leaderboard ol li {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .leaderboard ol li:last-child {
            border-bottom: none;
        }

        .leaderboard ol li .rank {
            font-weight: bold;
            color: #ff5722;
        }

        .leaderboard ol li .name {
            flex: 1;
            margin: 0 10px;
        }

        .leaderboard ol li .score {
            color: #ccc;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div class="navbar">
        <a href="#" class="logo">游戏平台</a>
        <div class="user-actions">
            <a href="/login.html" onclick="showLoginForm()">登录</a>
            <a href="/register.html" onclick="showRegisterForm()">注册</a>
        </div>
    </div>

    <!-- 页面内容 -->
    <div class="container">
        <!-- 游戏列表 -->
        <div class="game-list">
            <div class="game-card">
                <img src="/image/guojia.jpg" alt="游戏1">
                <div class="info">
                    <div class="name">游戏名称1</div>
                    <div class="description">这是一款非常有趣的冒险游戏。</div>
                </div>
            </div>
            <div class="game-card">
                <img src="/image/luxun.png" alt="游戏2">
                <div class="info">
                    <div class="name">游戏名称2</div>
                    <div class="description">这是一款非常刺激的射击游戏。</div>
                </div>
            </div>
            <div class="game-card">
                <img src="/image/yueying.jpg" alt="游戏3">
                <div class="info">
                    <div class="name">游戏名称3</div>
                    <div class="description">这是一款非常烧脑的解谜游戏。</div>
                </div>
            </div>
        </div>

        <!-- 排行榜 -->
        <div class="leaderboard">
            <h2>热门游戏排行榜</h2>
            <ol>
                <li>
                    <span class="rank">1</span>
                    <span class="name">游戏名称1</span>
                    <span class="score">1000分</span>
                </li>
                <li>
                    <span class="rank">2</span>
                    <span class="name">游戏名称2</span>
                    <span class="score">900分</span>
                </li>
                <li>
                    <span class="rank">3</span>
                    <span class="name">游戏名称3</span>
                    <span class="score">800分</span>
                </li>
            </ol>
        </div>
    </div>

    <!-- 登录和注册表单（隐藏） -->
    <div id="login-form" style="display: none;">
        <!-- 登录表单内容 -->
    </div>
    <div id="register-form" style="display: none;">
        <!-- 注册表单内容 -->
    </div>

    <script>
        function showLoginForm() {
            alert("显示登录表单");
            // 这里可以跳转到登录页面或弹出登录弹窗
        }

        function showRegisterForm() {
            alert("显示注册表单");
            // 这里可以跳转到注册页面或弹出注册弹窗
        }
    </script>
</body>
</html>